<div class="box">
  <div class="topBanner" id="slider">
    <ul class="sliders clearfix">
      <% @top_news.each do |news| %>
          <% if news.first_image.present? %>
              <li>
                <a href="/mobile/news/<%= news.link_url.split("/")[-1] %>">
                  <%= image_tag(news.first_image_url, align: "absmiddle",:size => "299X194") %>
                </a>
              </li>
          <% end %>
          <% if news.second_image.present? %>
              <li>
                <a href="/mobile/news/<%= news.link_url.split("/")[-1] %>">
                  <%= image_tag(news.second_image, align: "absmiddle",:size => "299X194") %>
                </a>
              </li>
          <%end  %>
          <% if news.third_image.present? %>
              <li>
                <a href="/mobile/news/<%= news.link_url.split("/")[-1]%>">
                  <%= image_tag(news.third_image, align: "absmiddle",:size => "299X194") %>
                </a>
              </li>
          <%end  %>
          <% if news.fourth_image.present? %>
              <li>
                <a href="/mobile/news/<%= news.link_url.split("/")[-1] %>">
                  <%= image_tag(news.fourth_image, align: "absmiddle",:size => "299X194") %>
                </a>
              </li>
          <%end  %>
          <% if news.fifth_image.present? %>
              <li>
                <a href="/mobile/news/<%= news.link_url.split("/")[-1] %>">
                  <%= image_tag(news.fifth_image, align: "absmiddle",:size => "299X194") %>
                </a>
              </li>
          <%end  %>
      <% end %>
    </ul>
  </div>
  <div class="text" id='text'>
    <ul class="pText">
      <% @top_news.each_with_index do |news, i| %>
          <% if news.first_image.present? %>
              <li style="<%= "display:block" if i == 0 %>">
                <%= news.title.length>16 ? "#{news.title[0..15]}...":news.title %>
              </li>
          <% end %>
          <% if news.second_image.present? %>
              <li style="<%= "display:none" if i == 0 %>">
                 <%= news.title.length>16 ? "#{news.title[0..15]}...":news.title %>
              </li>
          <%end  %>
          <% if news.third_image.present? %>
              <li style="<%= "display:none" if i == 0 %>">
                 <%= news.title.length>16 ? "#{news.title[0..15]}...":news.title %>
              </li>
          <%end  %>
          <% if news.fourth_image.present? %>
              <li style="<%= "display:none" if i == 0 %>">
                 <%= news.title.length>16 ? "#{news.title[0..15]}...":news.title %>
              </li>
          <%end  %>
          <% if news.fifth_image.present? %>
              <li style="<%= "display:none" if i == 0 %>">
                <%= news.title.length>16 ? "#{news.title[0..15]}...":news.title %>
              </li>
          <%end  %>


      <% end %>
    </ul>
  </div>
  <div class="icon" id="icon">
    <ul class="clearfix">
      <% @top_news.each_with_index do |news, i| %>
          <% if news.first_image.present? %>
              <li  class="<%= "hover" if i == 0 %>">
              </li>
          <% end %>
          <% if news.second_image.present? %>
              <li  class="<%= "hover" if i == 0 %>">
              </li>
          <%end  %>
          <% if news.third_image.present? %>
              <li  class="<%= "hover" if i == 0 %>">
              </li>
          <%end  %>
          <% if news.fourth_image.present? %>
              <li  class="<%= "hover" if i == 0 %>">
              </li>
          <%end  %>
          <% if news.fifth_image.present? %>
              <li  class="<%= "hover" if i == 0 %>">
              </li>
          <%end  %>
      <% end %>
    </ul>
  </div>
</div>
<!--box(end)-->
<div class="items">
  <ul class="clearfix">
    <li>
      <a href="/mobile/news?important=1">
        <p class="dis"><i class="b1"></i><p>
        <p>校园要闻</p>
      </a>
    </li>
    <li>
      <a href="/mobile/news?important=0">
        <p class="dis"><i class="b2"></i><p>
        <p>校园快讯</p>
      </a>
    </li>
    <li class="borderrRight">
      <a href="/mobile/news?category_id=7">
        <p class="dis"><i class="b3"></i><p>
        <p>综合新闻</p>
      </a>
    </li>
    <li>
      <a href="/mobile/news?category_id=65">
        <p class="dis"><i class="b4"></i><p>
        <p>招生就业</p>
      </a>
    </li>
    <li>
      <a href="/mobile/news?category_id=38">
        <p class="dis"><i class="b5"></i><p>
        <p>合作交流</p>
      </a>
    </li>
    <li class="borderrRight">
      <a href="/mobile/news?category_id=60">
        <p class="dis"><i class="b6"></i><p>
        <p>深度报道</p>
      </a>
    </li>
    <li>
      <a href="/mobile/news?category_id=68">
        <p class="dis"><i class="b7"></i><p>
        <p>图说华理</p>
      </a>
    </li>
    <li>
      <a href="/mobile/news?category_id=21">
        <p class="dis"><i class="b8"></i><p>
        <p>媒体华理</p>
      </a>
    </li>
    <li class="borderrRight">
      <a href="http://xiaobao.ecust.edu.cn/" target="_blank">
        <p class="dis"><i class="b9"></i><p>
        <p>校报在线</p>
      </a>
    </li>
    <li class="borderBottom">
      <a href="/mobile/notifies">
        <p class="dis"><i class="b10"></i><p>
        <p>通知公告</p>
      </a>
    </li>
    <li class="borderBottom">
      <a href="/mobile/reports">
        <p class="dis"><i class="b11"></i><p>
        <p>学术讲座</p>
      </a>
    </li>
    <li class="borderrRight borderBottom">
      <a href="/mobile/new_medias">
        <p class="dis"><i class="b12"></i></p>
        <p>新媒体</p>
      </a>
    </li>
  </ul>
</div>